﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery商品根据不同类型分类筛选代码 - xw素材网</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
</head>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:620px;margin:40px auto 0 auto;}
.sx,.zj{padding-bottom:10px;}
.sx a{color:#000;line-height:22px;display:inline-block;width:50px;height:22px;margin-right:10px;border:1px solid #fff;text-align:center;padding-right:6px;}
a.on{border:1px solid red;background:url(images/xx.jpg) no-repeat right top;}
.sx span,.zj span{display:inline-block;line-height:22px;height:22px;color:#00F;font-size:14px;margin-right:10px;text-align:right;width:70px;}
.zj a{color:#fff;line-height:22px;display:inline-block;width:100px;height:22px;margin-right:10px;border:1px solid #C00;text-align:center;background:url(images/xx2.jpg) no-repeat right top #C00;padding-right:10px;}
.qcqb{width:70px;height:22px;line-height:22px;background:#FF0;color:#690;display:none;display:inline-block;text-align:center;border:1px solid #ccc;cursor:pointer;}
</style>
<body>
<div class="demo">
	<div class="sx">
		<span>分类1：</span>
		<a rel="1" class="sx_child" name="aaa" href="javascript:;">阿迪达斯</a>
		<a rel="2" class="sx_child" name="aaa" href="javascript:;">李宁</a>
		<a rel="3" class="sx_child" name="aaa" href="javascript:;">耐克</a>
		<a rel="4" class="sx_child" name="aaa" href="javascript:;">乔丹</a>
	</div>
	<div class="sx">
		<span>分类2：</span>
		<a rel="1" class="sx_child" name="bbb" href="javascript:;">福建</a>
		<a rel="2" class="sx_child" name="bbb" href="javascript:;">广州</a>
		<a rel="3" class="sx_child" name="bbb" href="javascript:;">上海</a>
		<a rel="4" class="sx_child" name="bbb" href="javascript:;">北京</a>
	</div>
	<div class="sx">
		<span>分类3：</span>
		<a rel="1" class="sx_child" name="ccc" href="javascript:;">红色</a>
		<a rel="2" class="sx_child" name="ccc" href="javascript:;">绿色</a>
		<a rel="3" class="sx_child" name="ccc" href="javascript:;">黑色</a>
		<a rel="4" class="sx_child" name="ccc" href="javascript:;">白色</a>
	</div>
	<div class="sx">
		<span>分类4：</span>
		<a rel="1" class="sx_child" name="ddd" href="javascript:;">100</a>
		<a rel="2" class="sx_child" name="ddd" href="javascript:;">300</a>
		<a rel="3" class="sx_child" name="ddd" href="javascript:;">400</a>
		<a rel="4" class="sx_child" name="ddd" href="javascript:;">600</a>
	</div>
	<div class="zj">
		<span>删选结果：</span>
		<p class="qcqb">清除全部</p>
	</div>
</div>
<script type="text/javascript" src="js/shanxuan.js"></script>
<script type="text/javascript">
$('.sx').sx({
	nuv:".zj",//筛选结果
	zi:"sx_child",//所有筛选范围内的子类
	qingchu:'.qcqb',//清除全部
	over:'on'//选中状态样式名称
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>
</div>
</body>
</html>
